Action Creators হল ফাংশন যা অ্যাকশন অবজেক্ট তৈরি করে এবং এটি স্টোরে পাঠানোর জন্য ডিসপ্যাচ (dispatch) করা হয়। এই ফাংশনগুলি কোড পুনঃব্যবহারযোগ্যতা এবং পরিষ্কারতা নিশ্চিত করতে সহায়তা করে। সাধারণভাবে, অ্যাকশন অবজেক্টগুলি সরাসরি স্টোরে ডিসপ্যাচ করার পরিবর্তে, Action Creators ব্যবহার করে ডিসপ্যাচ করা হয়।
Action Creators আপনাকে আপনার অ্যাকশনগুলি অর্গানাইজড এবং স্কেলেবল রাখতে সাহায্য করে, যা একটি বড় অ্যাপ্লিকেশনে কোড মেইনটেন করা সহজ করে।
Action Creator কী?
Action Creator হলো একটি ফাংশন যা একটি অ্যাকশন অবজেক্ট রিটার্ন করে। এই ফাংশনের মাধ্যমে আপনি অ্যাকশন তৈরি করতে পারেন এবং সেই অ্যাকশনটি dispatch করতে পারেন।
Action Creators-কে ব্যবহারের সুবিধা:
- কোড পুনঃব্যবহারযোগ্যতা: একই অ্যাকশন টাইপ বারবার ব্যবহার করতে Action Creators ব্যবহার করা সহজ হয়।
- বিষয়ভিত্তিক ফাংশন: অ্যাকশন তৈরির জন্য বিষয়ভিত্তিক ফাংশন ব্যবহার করলে কোডের স্পষ্টতা বাড়ে।
- কোড পরিষ্কার রাখা: অ্যাকশন অবজেক্টগুলোকে কোডের মধ্যে সরাসরি ব্যবহার করার চেয়ে Action Creators-এর মাধ্যমে আলাদা ফাংশনে রাখা পরিষ্কার এবং মেইনটেনেবল।
Action Creators তৈরি করা
Action Creator সাধারণত একটি ফাংশন যা একটি অ্যাকশন অবজেক্ট রিটার্ন করে। এই অবজেক্টে type থাকে, যা রিডিউসারের জন্য একশনটি চিহ্নিত করে, এবং প্রয়োজন হলে payload থাকে যা একশনটির সাথে সম্পর্কিত ডেটা ধারণ করে।
উদাহরণ:
ধরা যাক, আমাদের একটি অ্যাপ্লিকেশনে টুডু আইটেম যোগ করার জন্য একশন তৈরি করতে হবে। এই জন্য একটি Action Creator লিখা যাবে:
// Action Type
const ADD_TODO = 'ADD_TODO';
// Action Creator
function addTodo(text) {
return {
type: ADD_TODO,
payload: {
id: Date.now(), // unique id for each todo
text: text
}
};
}
এখানে:
- type:
'ADD_TODO'- এটি একশনের ধরন। - payload:
{ id, text }- এটি টুডু আইটেমের তথ্য যা রিডিউসারে পাঠানো হবে।
Action Creator ব্যবহার করা
Action Creator ব্যবহার করে আপনি খুব সহজেই একশন তৈরি করতে পারেন এবং ডিসপ্যাচ করতে পারেন। অ্যাকশনটি স্টোরে পাঠানোর জন্য dispatch() ফাংশন ব্যবহার করা হয়।
উদাহরণ:
// Store তৈরি
import { createStore } from 'redux';
// Reducer
function todosReducer(state = [], action) {
switch (action.type) {
case ADD_TODO:
return [...state, action.payload];
default:
return state;
}
}
const store = createStore(todosReducer);
// Dispatch Action using Action Creator
store.dispatch(addTodo('Learn Redux'));
এখানে:
- addTodo('Learn Redux') - এই ফাংশন কলটি একটি অ্যাকশন তৈরি করবে যেটি টুডু আইটেম হিসেবে
'Learn Redux'টেক্সট ধারণ করবে। - store.dispatch() - এই ফাংশনটি অ্যাকশনটি স্টোরে পাঠিয়ে রিডিউসারের মাধ্যমে স্টেট পরিবর্তন করবে।
Action Creators এর আরো উদাহরণ
Redux অ্যাপ্লিকেশনে একাধিক একশন ব্যবহার করা হয়, যেমন টুডু আইটেমের ডিলিট, টুডু আইটেম কমপ্লিট করা ইত্যাদি। এসব কাজের জন্য বিভিন্ন Action Creators তৈরি করা যেতে পারে।
উদাহরণ: টুডু আইটেম ডিলিট করার জন্য Action Creator
// Action Type
const DELETE_TODO = 'DELETE_TODO';
// Action Creator for deleting todo
function deleteTodo(id) {
return {
type: DELETE_TODO,
payload: id // id of the todo to be deleted
};
}
উদাহরণ: টুডু আইটেম কমপ্লিট করার জন্য Action Creator
// Action Type
const TOGGLE_TODO = 'TOGGLE_TODO';
// Action Creator for toggling todo completion status
function toggleTodo(id) {
return {
type: TOGGLE_TODO,
payload: id // id of the todo to toggle completion
};
}
অ্যাকশন টাইপ কনস্ট্যান্ট ব্যবহার
Redux-এ, একশন টাইপ স্ট্রিংগুলিকে constant হিসেবে সংরক্ষণ করা ভাল অভ্যাস, যাতে ভুল টাইপ ব্যবহৃত না হয় এবং ডিবাগ করা সহজ হয়। এজন্য সাধারণত একটি আলাদা ফাইল (যেমন actionTypes.js) তৈরি করা হয় যেখানে একশন টাইপগুলিকে কনস্ট্যান্ট হিসেবে রাখা হয়।
উদাহরণ: Action Types কনস্ট্যান্ট
// actionTypes.js
export const ADD_TODO = 'ADD_TODO';
export const DELETE_TODO = 'DELETE_TODO';
export const TOGGLE_TODO = 'TOGGLE_TODO';
এবং তারপর, এই কনস্ট্যান্টগুলি Action Creator-এ ব্যবহার করা হয়:
import { ADD_TODO } from './actionTypes';
function addTodoAction(text) {
return {
type: ADD_TODO,
payload: { text }
};
}
এভাবে আপনি একশন টাইপগুলো একক স্থানে সংরক্ষণ করে কোডের নিরাপত্তা এবং রিডেবিলিটি বাড়াতে পারেন।
অ্যাসিনক্রোনাস Action Creators
Redux অ্যাপ্লিকেশনগুলিতে সাধারণত একশনগুলি সিনক্রোনাস হয়ে থাকে, তবে কখনও কখনও অ্যাসিনক্রোনাস একশন প্রয়োজন হতে পারে, যেমন API কলের মাধ্যমে ডেটা ফেচ করা। Redux তে অ্যাসিনক্রোনাস একশন পরিচালনার জন্য Redux Thunk বা Redux Saga মডিউল ব্যবহার করা হয়।
উদাহরণ: Redux Thunk এর মাধ্যমে অ্যাসিনক্রোনাস Action Creator
function fetchTodos() {
return function(dispatch) {
dispatch({ type: 'FETCH_TODOS_START' });
fetch('/api/todos')
.then(response => response.json())
.then(data => {
dispatch({ type: 'FETCH_TODOS_SUCCESS', payload: data });
})
.catch(error => {
dispatch({ type: 'FETCH_TODOS_FAILURE', payload: error });
});
};
}
এখানে:
fetchTodosহল একটি অ্যাসিনক্রোনাস অ্যাকশন ক্রিয়েটর, যা API থেকে ডেটা নিয়ে আসে এবং ডিসপ্যাচ করে।dispatch()-এর মাধ্যমে শুরু, সফল এবং ব্যর্থ হওয়ার স্টেটও আপডেট করা হয়।
সারাংশ
Action Creators হল ফাংশন যা অ্যাকশন অবজেক্ট তৈরি করে এবং সেই অ্যাকশনটি Redux স্টোরে ডিসপ্যাচ করে। এটি কোড পুনঃব্যবহারযোগ্যতা, পরিষ্কারতা এবং স্কেলেবিলিটি বৃদ্ধি করে। আপনি একাধিক একশন টাইপ ব্যবহার করে বিভিন্ন Action Creators তৈরি করতে পারেন এবং একশন টাইপগুলো সাধারণত কনস্ট্যান্ট হিসেবে সংরক্ষণ করা হয়। Redux অ্যাসিনক্রোনাস একশনের জন্য Redux Thunk বা Redux Saga ব্যবহার করতে পারেন।
